<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="/static/adminlte/bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="/static/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" type="text/css" href="/static/css/ionicons.min.css" />
  <!-- Theme style -->
  <link rel="stylesheet" href="/static/adminlte/dist/css/AdminLTE.min.css">
  <link rel="stylesheet" href="/static/webuploader-0.1.5/webuploader.css"/>
  <link rel="stylesheet" type="text/css" href="/static/umeditor/themes/default/css/umeditor.css"/>
	<title></title>
	</head>
	<body>

<section class="content">
      <div class="row">
		<div class="col-xs-12">
		          <div class="nav-tabs-custom">
		            <ul class="nav nav-tabs">
		              <li><a href="{:url('Category/index')}">栏目管理</a></li>
		              <li><a href="{:url('Category/add')}">添加栏目</a></li>
		              <li class="active"><a>编辑栏目</a></li>
		            </ul>
		            <div class="tab-content">
							<form class="form-horizontal" id="myform" action="{:url('category/update')}" method="post">
			                    <div class="form-group">
			                        <label class="col-sm-2 control-label">上级导航</label>
			                        <div class="col-sm-10">
			                            <select name="pid" class="form-control">
			                                <option value="0">一级栏目</option>
			                                {foreach name="category_level_list" item="vo"}
			                                <option value="{$vo.id}" {if condition="$category.id==$vo.id"} disabled="disabled"{/if} {if condition="$category.pid==$vo.id"} selected="selected"{/if}>{neq name="vo.level" value="1"}|{php}for($i=1;$i<$vo['level'];$i++){echo ' ----';}{/php}{/neq} {$vo.name}</option>
			                                {/foreach}
			                            </select>
			                        </div>
			                    </div>								
								
			                    <div class="form-group">
			                        <label class="col-sm-2 control-label">栏目名称</label>
			                        <div class="col-sm-10">
			                            <input type="text" name="name" value="{$category.name}"  placeholder="请输入栏目名称" class="form-control">
			                        </div>
			                    </div>
			                    <div class="form-group">
			                        <label class="col-sm-2 control-label">别名</label>
			                        <div class="col-sm-10">
			                            <input type="text" name="alias" value="{$category.alias}" placeholder="（选填）请输入导航别名" class="form-control">
			                        </div>
			                    </div>
			                    <div class="form-group">
			                        <label class="col-sm-2 control-label">图标</label>
			                        <div class="col-sm-10">
			                            <input type="text" name="icon" value="{$category.icon}" placeholder="（选填）如：fa fa-home" class="form-control">
			                        </div>
			                    </div>
			                    <div class="form-group">
			                        <label class="col-sm-2 control-label">缩略图</label>
			                        <div class="col-sm-10">
			                        	<input type="text" name="thumb" value="{$category.thumb}" id="thumb" style="display: none;">
									    <div id="fileList" class="uploader-list">
									    	{if condition="$category.thumb"}
									    	<div class="file-item thumbnail">
									    		<img src="{$category.thumb}" style="width: 100px;height: 100px;" />
									    	</div>
									    	{/if}
									    </div>
									    <div id="filePicker">选择图片</div>
			                        </div>
			                    </div>			                    
			                    <div class="form-group">
			                        <label class="col-sm-2 control-label">内容</label>
			                        <div class="col-sm-10">
			                            <script type="text/plain" id="container" name="content" style="width:100%;height:240px;">{$category.content}</script>
			                        </div>
			                    </div>			                    
			                    <div class="form-group">
			                        <label class="col-sm-2 control-label">类型</label>
			                        <div class="col-sm-10">
			                            <select name="type" class="form-control">
			                                <option value="1" {if condition="$category.type==1"} selected="selected"{/if}>列表</option>
			                                <option value="2" {if condition="$category.type==2"} selected="selected"{/if}>单页</option>
			                            </select>
			                        </div>
			                    </div>				                    			                   	                
			                    <div class="form-group">
			                        <label class="col-sm-2 control-label">模板</label>
			                        <div class="col-sm-10">
			                            <input type="text" name="template"  value="{$category.template}" placeholder="（选填）请输入模板文件名" class="form-control">
			                        </div>
			                    </div>
			                    <div class="form-group">
			                        <label class="col-sm-2 control-label">排序</label>
			                        <div class="col-sm-10">
			                            <input type="text" name="sort" value="{$category.sort}" class="form-control">
			                        </div>
			                    </div>			                    
			                    <div class="form-group">
				                	<div class="col-sm-offset-2 col-sm-10">
				                		<input type="hidden" name="id" value="{$category.id}">
					                	<button type="button" id="sub" class="btn btn-primary">提交</button>
				                	</div>
			                    </div>
			                </form>
		            </div><!-- /.tab-content -->
		          </div><!-- /.nav-tabs-custom -->
		</div><!--/.row-->
      </div>
  </section>
<!-- jQuery 2.2.3 -->
<script src="/static/adminlte/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="/static/webuploader-0.1.5/webuploader.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/layer/layer.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="/static/adminlte/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/umeditor/umeditor.config.js"></script>
<script src="/static/umeditor/umeditor.min.js"></script>
<script type="text/javascript">
	var ue = UM.getEditor('container');
</script>
<script src="/static/js/admin.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

$(function(){
	$list = $('#fileList');
	// 初始化Web Uploader
	var uploader = WebUploader.create({
	    // 选完文件后，是否自动上传。
	    auto: true,
	    
		// swf文件路径
		swf:'/static/webuploader-0.1.5/Uploader.swf',
		
	    // 文件接收服务端。
	    server: '/index.php/api/upload/uploadThumb',
	
	    // 选择文件的按钮。可选。
	    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
	    pick: '#filePicker',
	
	    // 只允许选择图片文件。
	    accept: {
	        title: 'Images',
	        extensions: 'gif,jpg,jpeg,png',
	        mimeTypes: 'image/*'
	    }
	});
	
	// 当有文件添加进来的时候
	uploader.on( 'fileQueued', function( file ) {
		$list.empty();
	    var $li = $(
	            '<div id="' + file.id + '" class="file-item thumbnail">' +
	                '<img>' +
	            '</div>'
	            ),
	        $img = $li.find('img');
	
	
	    // $list为容器jQuery实例
	    $list.append($li);
	
	    // 创建缩略图
	    // 如果为非图片文件，可以不用调用此方法。
	    // thumbnailWidth x thumbnailHeight 为 100 x 100
	    uploader.makeThumb( file, function( error, src ) {
	        if ( error ) {
	            $img.replaceWith('<span>不能预览</span>');
	            return;
	        }
	        $img.attr( 'src', src );
	    }, 100,100 );
	});
	
	// 文件上传成功，给item添加成功class, 用样式标记上传成功。
	uploader.on( 'uploadSuccess', function( file,json) {
	    document.getElementById('thumb').value = json.filename;    
	});
});

</script>
	</body>
</html>
